<div class="siber-div">
    <div class="sidebar-header d-flex align-items-center" onclick="location.href='html/user_look.html'">
        <div id="avatar" class="avatar"><img :src="user.pic" alt="..." class="img-fluid rounded-circle"></div>
        <div class="title">
            <h1 class="h5">{{user.realName}}</h1>
            <p>{{deptName}}</p>
        </div>
    </div>
    <!-- Sidebar Navidation Menus--><span class="heading">Main</span>
    <ul class="list-unstyled">
        <li :class="activeId==0?'active':''"><a href="html/home.html" @click="saveActive(0)"> <i class="icon-home"></i>主页
        </a></li>
        <li><a href="#userDropdown" data-toggle="collapse" aria-expanded="true"> <i class="icon-windows"></i>用户列表</a>
            <ul id="userDropdown" class=" list-unstyled">
                <li :class="activeId==1?'active':''"><a @click="saveActive(1)" href="html/user.html">查看用户</a></li>
                <li :class="activeId==2?'active':''"><a @click="saveActive(2)" href="html/my_user.html">我关注的用户</a></li>
                <li :class="activeId==3?'active':''"><a @click="saveActive(3)" href="html/article.html">发布文章</a></li>
                <li :class="activeId==4?'active':''"><a @click="saveActive(4)" href="html/article_collect.html">我的收藏</a>
                </li>
            </ul>
        </li>
        <!--<li><a href="login.html"> <i class="icon-logout"></i>Login page </a></li>-->

        <li><a href="#depDropdown" data-toggle="collapse" aria-expanded="true"> <i class="icon-windows2"></i>部门列表</a>
            <ul id="depDropdown" class=" list-unstyled ">
                <li :class="activeId==5?'active':''"><a @click="saveActive(5)" href="html/department.html">全部部门</a></li>
                <li :class="activeId==6?'active':''"><a @click="saveActive(6)" href="html/meeting.html">会议系统</a></li>
            </ul>
        </li>
    </ul>
</div>
<script src="js/vue-2.6.11.js"></script>
<script src="js/axios-0.19.2.min.js"></script>
<script>
    $(function () {
        let item = JSON.parse(sessionStorage.getItem("user"));
        let socket=new WebSocket(`ws://localhost:8080/webSocket/${item.id}`);
        socket.onmessage = function (event) { layer.msg(event.data); }
    });
</script>
<script>
    new Vue({
        el: '.siber-div',  //选中整个main
        data: {
            user: {
                pic: "211.jpg"
            },//初始化对象     vue建议声明对象同时进行初始化，避免undefinded
            deptName: '',
            activeId: 0
        },
        methods: {
            getDept: function () {
                // debugger;
                // getById
                axios.get(`dept/getById/${this.user.deptId}`).then(rs => {
                    this.deptName = rs.data.obj.name;
                });
            },
            // setActive:function (e) {
            //      e.target.classList.add('active');
            // },
            getLoginUser: function () {
                let item = sessionStorage.getItem("user");
                if (item == undefined || item.length <= 0) {//session不存在
                    axios.get("user/getLoginUser").then(rs => {
                        sessionStorage.setItem("user", JSON.stringify(rs.data.obj));
                    }).catch(e => {
                        layer.msg("出错了");
                    })
                }
            },
            saveActive: function (id) {
                //保持当前的样式id
                sessionStorage.setItem("activeId", id);
            },
        },
        created: function () {
            // this.connectWebSocket();
            this.getDept();
            this.getLoginUser();
            this.user = JSON.parse(sessionStorage.getItem("user"));
            let item = sessionStorage.getItem("activeId");
            if (item != undefined) {
                this.activeId = item;
            }
        }
    });
</script>